<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    div#outer {
      width: 600px;
      /* height: 200px; */
      outline:3px solid green;
      /* overflow: hidden; */
    }
    div.inner {
      width: 200px;
      height: 200px;
      background-color: hotpink;
      float:left;
    }
    div#outer>p {
      clear:left;
    }

    div#other {
      width: 400px;
      height: 400px;
      background-color: red;
    }

    /* 
      浮动用float属性
        取值：left左，right右

      副作用：
        父元素高度塌陷
          父元素高度没有子元素撑开
          父元素高度塌陷
      
      清除浮动：
        clear属性
          取值：left，right，both(两边同时清除)
    
      解决副作用：清除浮动
          1、给父元素加高
          2、触发BFC，overflow:hidden
          3、给浮动元素的父素添加最后一个块级子元素，给最后一个子元素清浮动
          4、给父元素添加万能清浮动
    */
    
    /* 定义一个类，设置在后面的伪元素 */
    .clearFloat::after {
      /* 伪元素内容为空 */
      content: "";
      /* 将伪元素转成块元素 */
      display: block;
      /* 清浮动 */
      clear: both;
      /* 高度设置为0 */
      height: 0;
      /* 行高设为0 */
      line-height: 0;
      /* 设置元素隐藏 */
      visibility: hidden;
    }
    /* 设置ie浏览器兼容性问题 */
    .clearFloat {
      zoom: 1;
    }


    ul {
      border: 3px solid blue;
    }
    li {
      list-style: none;
      float: left;
    }
  </style>
</head>

<body>
  <!-- 思考案例 -->
  <div id="outer" class="clearFloat">
    <div class="inner"></div>
    <div class="inner">02</div>
    <div class="inner">03</div>
    <p></p>
  </div>
  <ul class="clearFloat">
    <li>li的文字01</li>
    <li>li的文字02</li>
    <li>li的文字03</li>
    <li>li的文字04</li>
    <li>li的文字05</li>
  </ul>

  <div id="other"></div>
</body>

</html>